<template>
  <div id="Index">
    <transition :name="transitionName">
      <router-view class="Router" />
    </transition>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      transitionName: "slide-left"
    };
  },
  created(){
  	let loading=document.getElementById("Loading");
  	if(loading!=null){
  		document.body.removeChild(loading);
  	}
  },
  watch: {
    $route(to, from) {
       let isBack = this.$router.isBack;
      this.transitionName = isBack ? "slide-right" : "slide-left";
      this.$router.isBack = false;
    }
  }
};
</script>

<style scoped>
	.Router {
		position: absolute;
		width: 100%;
		height: 100%;
		transition: all .4s ease;
	}
	.slide-left-enter,
	.slide-right-leave-active {
		opacity: 0;
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}
	
	.slide-left-leave-active,
	.slide-right-enter {
		opacity: 0;
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100% 0);
	}
</style>
